<script setup lang="ts">
import type {LoginReq} from "@/interface/user.ts"
import {Lock, User} from "@element-plus/icons-vue"
import {ref} from 'vue'
import type {FormInstance, FormRules} from "element-plus";
import {ElMessage} from "element-plus";
const model = ref<LoginReq>({
  username:"",
  password:""
})
const registerRef = ref<FormInstance>()
const registerRules = ref<FormRules>({
  username:[
    {
      required:true,
      message:"账号不能为空",
      trigger:'blur'
    }
  ],
  password:[
    {
      required:true,
      message:"密码不能为空",
      trigger:'blur'
    }
  ]
})
const handleClick = () => {
  ElMessage({
    message: '后台账号不支持注册',
    type: 'warning',
  })
}
</script>

<template>
  <el-form class="register-form" :model="model" ref="registerRef" :rules="registerRules">
    <h1 class="register-title">注册</h1>
    <el-form-item prop="username">
      <el-input type="text" placeholder="请输入账号" :perfix-icon="User" v-model="model.username" size="large"></el-input>
    </el-form-item>
    <el-form-item prop="password">
      <el-input show-password type="password" placeholder="请输入密码" :perfix-icon="Lock" v-model="model.password" size="large"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" class="register-button" size="large" @click="handleClick">注册</el-button>
    </el-form-item>
  </el-form>
</template>

<style scoped>
.register-form{
  grid-row: 1;
  grid-column: 1;
  opacity: 0;
  transition: 1s ease-in-out;
  padding: 1% 25%;
  z-index: 0;
}
.register-form.sign-up-model{
  opacity: 1;
  transition: 1s ease-in-out;
  transition-delay: 0.5s;
  z-index: 1;
}
.register-title{
  text-align: center;
  color:#444;
}
.register-button{
  width: 100%;
  font-size: 18px;
}
</style>